<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('人员统计') }}</span>
    </div>
    <el-table v-loading="loading" :data="staffCountData" border @cell-click="cellClickHandle">
      <el-table-column :label="$t('部门名称')" align="center" prop="deptName" />
      <el-table-column :label="$t('在职员工')" align="center" prop="entryCount">
        <template slot-scope="scope">
          <el-link type="primary">{{ scope.row.entryCount }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('本月入职员工')" align="center" prop="thisMonthEntryCount">
        <template slot-scope="scope">
          <el-link type="primary">{{ scope.row.thisMonthEntryCount }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('离职员工')" align="center" prop="resignCount">
        <template slot-scope="scope">
          <el-link type="primary">{{ scope.row.resignCount }}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="$t('员工列表')" :visible.sync="staffListOpen" :close-on-click-modal="false" :lock-scroll="false" width="50%" append-to-body>
      <el-table v-loading="staffListLoading" :data="staffList" border>
        <el-table-column :label="$t('姓名')" align="center" prop="name" />
        <el-table-column :label="$t('部门')" align="center" prop="deptName" />
        <el-table-column :label="$t('职位')" align="center" prop="positionName" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { staffCount, getStaffList } from '@/api/oa/hr/hrBase'

export default {
  data() {
    return {
      staffCountData: [],
      loading: false,
      staffList: [],
      staffListOpen: false,
      staffListLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      staffCount().then(res => {
        if (res.code === 200) {
          this.staffCountData = res.data
        }
        this.loading = false
      })
    },
    cellClickHandle(row, column) {
      if (column.property !== 'deptName') {
        this.staffListOpen = true
        this.staffListLoading = true
        const params = {
          deptId: row.deptId,
          type: column.property
        }
        getStaffList(params).then(res => {
          if (res.code === 200) {
            this.staffList = res.data
          }
          this.staffListLoading = false
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
